<template>
  <div class="mod-demo-echarts">
    <div>
      <el-row :gutter="12" class="margin-bottom-20">
        <el-col :xs="8" :sm="8" :md="8">
<!--          <el-tooltip class="item" effect="light" placement="top">-->
<!--          </el-tooltip>-->
          <el-card shadow="never" @click.native="firmList('1')">
            <div slot="header">
              <h3 class="text-info">用户数量 <i class="el-icon-user-solid"/></h3>
            </div>
            <h1 class="h1 text-primary">{{statisticInfo.appUserCount}} 位</h1>
          </el-card>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8">
          <el-card shadow="never" @click.native="firmList('2')">
            <div slot="header">
              <h3 class="text-info">设计师数量<i class="el-icon-user"/></h3>
            </div>
            <h1 class="h1 text-black">{{statisticInfo.designerCount}} 位</h1>
          </el-card>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8">
          <el-card shadow="never" @click.native="firmList('3')">
            <div slot="header">
              <h3 class="text-info">主题数量<i class="el-icon-star-on"/></h3>
            </div>
            <h1 class="h1 text-primary">{{statisticInfo.themeCount}} 个</h1>
          </el-card>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8">
          <el-card shadow="never" @click.native="firmList('4')">
            <div slot="header">
              <h3 class="text-info">组件数量<i class="el-icon-star-on"/></h3>
            </div>
            <h1 class="h1 text-primary">{{statisticInfo.widgeCount}} 个</h1>
          </el-card>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8">
          <el-card shadow="never" @click.native="firmList('5')">
            <div slot="header">
              <h3 class="text-info">壁纸数量<i class="el-icon-star-on"/></h3>
            </div>
            <h1 class="h1 text-primary">{{statisticInfo.wallpaperCount}} 个</h1>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- echarts图标展示 -->
    <el-row :gutter="20">
<!--      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">-->
      <el-col>
        <el-card shadow="never" @click.native="firmList('1')">
          <div slot="header">
            <h3 class="text-info">用户统计 <i class="el-icon-user-solid"/></h3>
            <el-select v-model="dateVaule" placeholder="日期选择" style="left: 294px;top: -50px;" @change="selectDateVaule">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <h1 class="h1 text-primary">用户总数:&nbsp;{{userTotalData.totals}}位</h1>
            <br>
            <h1 class="h1 text-primary">新增总数:&nbsp;{{userTotalData.appends}}位</h1>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <el-card>
          <div slot="header">
            <h3 class="text-info">搜索点击 <i class="el-icon-search"/></h3>
            <div id="J_chartBarBox" class="chart-box"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <el-card>
          <div slot="header">
            <h3 class="text-info">交易汇总 <i class="el-icon-search"/></h3>
            <div id="trade_collect_chartBarBox" class="chart-box"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 上部系统消息 -->
    <el-row :gutter="20" class="margin-top-20">
      <el-col>
        <el-card shadow="never" body-style="padding:6px 15px;">
          <h3 slot="header" class="text-gray"><i class="el-icon-time font-size-20 margin-right-10"></i>系统概况</h3>
          <el-form ref="form" class="details-form" label-width="120px" label-position="left">
            <template>
              <el-form-item label="用户头像">
                <div class="demo-type">
                  <el-avatar :size="60" @error="errorHandler">
                    <img :src="systemInfo.avatar"/>
                  </el-avatar>
                </div>
              </el-form-item>
            </template>
            <template>
              <el-form-item label="当前用户" key="当前用户">
                <span>{{systemInfo.nickname}}</span>
              </el-form-item>
            </template>
            <template>
              <el-form-item label="系统名称" key="系统名称">
                <span>Theme-后台管理</span>
              </el-form-item>
            </template>
            <template>
              <el-form-item label="服务器IP" key="服务器IP">
                <span>{{systemInfo.serverIp}}</span>
              </el-form-item>
            </template>
            <template>
              <el-form-item label="操作系统" key="操作系统">
                <span>{{systemInfo.serverOS}}</span>
              </el-form-item>
            </template>
            <template>
              <el-form-item label="当前时间" key="当前时间">
                <span>{{systemInfo.currentDate}}</span>
              </el-form-item>
            </template>
            <template>
              <el-form-item label="登录次数" key="登录次数">
                <span>-</span>
              </el-form-item>
            </template>
          </el-form>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <el-card shadow="never" body-style="padding:0; overflow: hidden;">
          <h3 slot="header" class="text-gray"><i class="el-icon-bell font-size-20 margin-right-10"></i>最新消息
            <router-link to="/sys-message" style="float:right;"><a type="primary">查看更多<i
              class="el-icon-d-arrow-right"></i></a></router-link>
          </h3>
          <el-table :data="tableData" height="365">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column label="分类" width="180">
              <template slot-scope="scope">
                <el-tag size="small" type="success">
                  <span class="col-cont" v-html="messageTypeformatter(scope.row)"></span>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="title" header-align="center" align="center" label="标题">
            </el-table-column>
            <el-table-column label="内容">
              <template slot-scope="scope">
                <a href="javascript:void(0)" @click="toMessageDetails(scope.row)"><span class="router-link">{{scope.row.content !=null ? scope.row.content:'无内容'}}</span></a>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    data() {
      return {
        errorHandler() {
          return true
        },
        statisticInfo: {
          appUserCount: 0,
          designerCount: 0,
          themeCount: 0,
          widgeCount: 0,
          wallpaperCount: 0,
        },
        sunnyImg: require("../../assets/img/weather/cloudy_128.png"),
        cloudyImg: require("../../assets/img/weather/cloudy_128.png"),
        showersImg: require("../../assets/img/weather/cloudy_128.png"),
        systemInfo: {
          "id": 1051,
          "createTime": 1586410687669,
          "updateTime": 1586410687669,
          "status": 1,
          "userId": 18,
          "username": "cuixinfu",
          "nickname": "崔辛福",
          "type": 1,
          "operationType": 1,
          "country": null,
          "area": null,
          "ip": "175.0.39.201",
          "loginLastTime": "2020-04-01 15:00:21",
          "currentDate": "2020-04-01 15:00:21",
          "loginLastIp": "1.119.148.124",
          "serverIp": "127.0.0.1",
          "serverOS": "Linux amd64",
          "loginCount": "暂为统计"
        },
        tableData: [
          {
            "id": 1,
            "createTime": "2020-04-01 15:00:21",
            "updateTime": null,
            "status": 1,
            "fromType": null,
            "fromUserId": null,
            "fromNickName": "",
            "type": 1,
            "groupType": 0,
            "messageType": 221,
            "title": "任务报警",
            "content": "有新的任务报警21586409846925446已提交，请前往审核。",
            "referenceId": 374,
            "deleted": null,
            "notifyCode": "3a4cbded5d2a4dc0af6713c0c220476b",
            "count": null,
            "types": null,
            "readTime": null,
            "readStatus": 1,
            "keyword": null,
            "beginTime": null,
            "endTime": null,
            "messageUserId": 5366,
            "toNickName": ""
          }
        ],
        messageTypeEnum: {
          1: {
            name: '系统通知',
            link: '/sys-messagee'
          },
          2: {
            name: '系统公告',
            link: '/sys-message'
          },
          3: {
            name: '服务提醒',
            link: '/sys-message'
          },
          4: {
            name: '交易提醒',
            link: '/sys-message'
          }
        },
        readMsgParams: {
          id: '',
          messageUserId: ''
        },
        chartBar: null,
        options: [{
          value: '1',
          label: '当日'
        }, {
          value: '2',
          label: '最近7天'
        }, {
          value: '3',
          label: '最近30天'
        }],
        dateVaule: '2',
        userTotalData:{},
        searchEcharts:{
          'lineCount' : [0],
          'lineDate' : ['无']
        },
      }
    },
    mounted() {
      this.initHomestatistics()
      this.initHomeEcharts()
      this.initMessage()
    },
    activated() {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      if (this.chartBar) {
        this.chartBar.resize()
      }
    },
    methods: {
      initHomestatistics() {
        this.$http({
          url: this.$http.adornUrl('/home/statis'),
          method: 'get',
          params: this.$http.adornParams({'dateType':this.dateVaule})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.statisticInfo.appUserCount = data.data.appUserCount
            this.statisticInfo.designerCount = data.data.designerCount
            this.statisticInfo.themeCount = data.data.themeCount
            this.statisticInfo.widgeCount = data.data.widgeCount
            this.statisticInfo.wallpaperCount = data.data.wallpaperCount
          } else {

          }
        })
      },
      initHomeEcharts() {
        this.$http({
          url: this.$http.adornUrl('/home/echarts'),
          method: 'get',
          params: this.$http.adornParams({'dateType':this.dateVaule})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.userTotalData = data.userDataEcharts
            this.searchEcharts = data.searchEcharts
            this.tradeCollectEcharts = data.tradeCollectEcharts
            this.initChartBar()
            this.initChartBarTradeCollect()
          } else {
            this.initChartBar()
            this.initChartBarTradeCollect()
          }
        })
      },
      initMessage() {
        this.$http({
          url: this.$http.adornUrl('/sys/message/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': 1,
            'limit': 4,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.tableData = data.page.list
          }
        })
        this.$http({
          url: this.$http.adornUrl('/home/systemInfo'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.systemInfo = data.systemInfo
          }
        })
      },
      firmList(type) {
        if (type === '1') {
          this.$router.push({path: `/home`})
        } else if (type === '2') {
          this.$router.push({path: `/home`})
        } else if (type === '3') {
          this.$router.push({path: `/home`})
        } else {
          this.$router.push({path: `/home`})
        }
      },
      messageTypeformatter(row) {
        let messageTypeName = this.messageTypeEnum[row.type]
        if (messageTypeName === null || messageTypeName === '' || messageTypeName === undefined) {
          return row.title
        }
        return messageTypeName.name
      },
      toMessageDetails(row) {
        console.log("==========查看消息详情==========")
      },
      selectDateVaule(value) {
        console.log(value)
        this.dateVaule = value
        this.initHomeEcharts()
      },
      // 柱状图-点击搜索
      initChartBar() {
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            data: this.searchEcharts.lineDate
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              type: "category",
              //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              data: this.searchEcharts.lineDate
            }
          ],
          yAxis: [
            {
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              type: 'value'
            }
          ],
          toolbox: {
            //右上角功能
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none' //缩放区域，缩放还原区域
              },
              dataView: { readOnly: false }, //数据视图
              magicType: { type: ['line', 'bar'] }, //柱状/折线切换
              restore: {}, //还原
              saveAsImage: {} //保存图片
            }
          },
          color: [
            "#6F9BF6",
          ],
          series: [
            {
              name: '搜索词热度',
              stack: '搜索词热度',
              type: 'bar',
              barWidth: 40,
              barGap: 0.5,
              label: {
                show: true,
                position: "top",
              },
              //data: [620, 732, 701, 734, 1090, 1130, 1120]
              data: this.searchEcharts.lineCount
            },
          ]
        }
        this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
        this.chartBar.setOption(option)
        window.addEventListener('resize', () => {
          this.chartBar.resize()
        })
      },

      // 柱状图-点击搜索
      initChartBarTradeCollect() {
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            data: this.tradeCollectEcharts.lineDate
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              type: "category",
              //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              data: this.tradeCollectEcharts.lineDate
            }
          ],
          yAxis: [
            {
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              type: 'value'
            }
          ],
          toolbox: {
            //右上角功能
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none' //缩放区域，缩放还原区域
              },
              dataView: { readOnly: false }, //数据视图
              magicType: { type: ['line', 'bar'] }, //柱状/折线切换
              restore: {}, //还原
              saveAsImage: {} //保存图片
            }
          },
          color: [
            "#6F9BF6",
          ],
          series: [
            {
              name: '交易汇总',
              stack: '交易金额',
              type: 'bar',
              barWidth: 40,
              barGap: 0.5,
              label: {
                show: true,
                position: "top",
              },
              data: this.tradeCollectEcharts.lineCount
            },
          ]
        }
        this.chartBar = echarts.init(document.getElementById('trade_collect_chartBarBox'))
        this.chartBar.setOption(option)
        window.addEventListener('resize', () => {
          this.chartBar.resize()
        })
      },

      regFenToYuan(fen) {
        var num = fen;
        num = fen * 0.01;
        num += '';
        var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g;
        num = num.replace(reg, '$1');
        num = this.toDecimal2(num)
        return num
      },
      toDecimal2(x) {
        var f = parseFloat(x);
        if (isNaN(f)) {
          return false;
        }
        var f = Math.round(x * 100) / 100;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
          rs = s.length;
          s += '.';
        }
        while (s.length <= rs + 2) {
          s += '0';
        }
        return s;
      },
    },
  }
</script>
<style lang="scss">
  .mod-home {
    line-height: 1.5;
  }
  .el-card{
    margin: 10px;
  }
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }

    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;

      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }

    .chart-box {
      min-height: 400px;
    }
  }

  .el-form-item {
    margin-bottom: 4px;
  }

  .el-card__header {
    padding: 0px 20px !important;
    border-bottom: 1px solid #ebeef5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
</style>


